<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 100px;
            width: 100px;
            background-color:cornflowerblue;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box" style="opacity: 1;"></div>
    <script>
        const box = document.querySelector(".box")

        box.addEventListener("click", (e) => {
            move(e.target, {left : 400, top : 300, opacity : 20})
        })

        function move(element, endObj) {
            let timeObj = {}
            for (let key in endObj) {
                timeObj = setInterval(() => {
                    let start = key === "opacity" ? element.style.opacity * 100 : (key === "left" ? element.offsetLeft : element.offsetTop)
                    let speed = key === "opacity" ? (-5) : Math.ceil((endObj[key] - start) / 20)
                    if (Math.abs((endObj[key]) - start) < Math.abs(speed)) {
                        clearInterval(timeObj[key])
                        delete timeObj[key]
                        element.style[key] = key === "opacity" ? endObj[key] / 100 : endObj[key] + "px"
                    } else {
                        element.style[key] = key === "opacity" ? (start + speed) / 100 : (start + speed) + "px"
                    }
                }, 50)
            }
        }
    </script>
</body>
</html>